<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />

    <title>Primitive UI - CSS Framework &amp; Sass Boilerplate</title>

    <meta name="author" content="Tania Rascia" />
    <meta name="description" content="A simple Sass starter pack." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/prism.css" />
    <link rel="stylesheet" href="css/example.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
    />
    <link rel="icon" href="images/favicon.png" />
  </head>

  <body>
    <header class="text-center vertical-center">
      <div class="small-container">
        <h1>Primitive</h1>
        <p>
          Primitive is a minimalist Sass boilerplate that provides helpful, browser-consistent
          styling for default HTML elements - buttons, forms, tables, lists, and typography.
        </p>
        <p>
          <a
            class="github-button"
            href="https://github.com/taniarascia/primitive"
            data-icon="octicon-star"
            data-size="large"
            data-show-count="true"
            aria-label="Star taniarascia/primitive on GitHub"
            >Star</a
          >
          <a
            class="github-button"
            href="https://github.com/taniarascia"
            data-show-count="true"
            data-size="large"
            aria-label="Follow @taniarascia on GitHub"
            >Follow @taniarascia</a
          >
        </p>
        <p>
          <a id="boring" class="button example-button">Boring Mode</a>
          <a id="eighties" class="button">EIGHTIES MODE!</a>
        </p>
      </div>
    </header>

    <section class="setup content-section">
      <div class="installation small-container">
        <h2>Download and Installation</h2>
        <p>There are two options for using Primitive.</p>
        <div class="flex-row padding-top">
          <div class="flex-large flex-50">
            <img src="images/css3.png" class="logos" />
            <h4><strong>CSS</strong> (easy)</h4>
            <p>
              <a href="https://taniarascia.github.io/primitive/css/main.css" download
                >Download the stylesheet</a
              >, link to it in the <code>&lt;head&gt;</code>, and place all your custom CSS in a
              separate stylesheet.
            </p>
          </div>
          <div class="flex-large flex-50">
            <img src="images/sass.png" class="logos" />
            <h4><strong>Sass</strong> (recommended)</h4>
            <p>
              <a href="#sass-main">Download the source</a> and set up a Sass workflow with npm
              scripts.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="primitive">
      <div class="flex-container">
        <aside>
          <div class="toggle-nav"></div>
          <h1>
            <a href="index.html">Primitive</a>
          </h1>
          <nav>
            <ul>
              <li class="title">HTML</li>
              <li>
                <a href="#getting-started"> <i class="fa fa-cog"></i>Getting Started</a>
              </li>
              <li>
                <a href="#containers"> <i class="fa fa-cube"></i>Containers</a>
              </li>
              <li>
                <a href="#grid"> <i class="fa fa-th"></i>Grid</a>
              </li>
              <li>
                <a href="#typography"> <i class="fa fa-font"></i>Typography</a>
              </li>
              <li>
                <a href="#buttons"> <i class="fa fa-hand-pointer-o"></i>Buttons</a>
              </li>
              <li>
                <a href="#forms"> <i class="fa fa-check-square-o"></i>Forms</a>
              </li>
              <li>
                <a href="#tables"> <i class="fa fa-table"></i>Tables</a>
              </li>
              <li>
                <a href="#lists"> <i class="fa fa-list"></i>Lists</a>
              </li>
              <li>
                <a href="#code"> <i class="fa fa-code"></i>Code</a>
              </li>
              <li>
                <a href="#helpers"> <i class="fa fa-medkit"></i>Helpers</a>
              </li>
            </ul>
            <ul>
              <li class="title">Sass</li>
              <li>
                <a href="#sass-main"> <i class="fa fa-terminal"></i>How to Use</a>
              </li>
              <li>
                <a href="#sass-config"> <i class="fa fa-usd"></i>Configuration</a>
              </li>
            </ul>
          </nav>
        </aside>

        <main class="content" id="main-content">
          <div class="medium-container">
            <section id="getting-started">
              <article>
                <h2>HTML Starting Point</h2>

                <p>
                  Begin with a basic
                  <a href="https://en.wikipedia.org/wiki/HTML5">HTML5</a> template that does the
                  following:
                </p>
                <ul>
                  <li>
                    Sets the
                    <a href="http://www.w3schools.com/tags/ref_language_codes.asp" target="_blank"
                      >default language</a
                    >
                    and <a href="https://en.wikipedia.org/wiki/UTF-8">character set</a>.
                  </li>
                  <li>
                    Uses the latest
                    <a href="https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx"
                      >Internet Explorer rendering mode</a
                    >.
                  </li>
                  <li>
                    Defines the
                    <a
                      href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag"
                      >width of the viewport</a
                    >
                    to enable responsiveness.
                  </li>
                  <li>
                    Includes links to the
                    <a href="https://taniarascia.github.io/primitive/css/main.css" target="_blank"
                      >Primitive CSS file</a
                    >, an empty JavaScript file, and a Favicon.
                  </li>
                </ul>
                <pre><code class="language-html">&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

  &lt;title&gt;&lt;/title&gt;

  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot;&gt;
  &lt;link rel=&quot;icon&quot; href=&quot;images/favicon.png&quot;&gt;
&lt;/head&gt;

&lt;body&gt;&lt;/body&gt;

&lt;/html&gt;</code></pre>

                <p>View all HTML5 with Primitive CSS applied to them.</p>
                <p>
                  <a href="test.html" class="button"
                    >HTML5 Elements Test</a
                  >
                </p>
              </article>
            </section>

            <section id="containers">
              <article>
                <h2>Containers</h2>
                <p>
                  There are three container sizes for content that are centered with left and right
                  padding. Content without a container will span the width of the viewport.
                </p>
                <pre><code class="language-html">&lt;div class=&quot;small-container&quot;&gt;Small&lt;/div&gt;
&lt;div class=&quot;medium-container&quot;&gt;Medium&lt;/div&gt;
&lt;div class=&quot;container&quot;&gt;Large&lt;/div&gt;</code></pre>

                <table>
                  <thead>
                    <tr>
                      <th>Small</th>
                      <th>Medium</th>
                      <th>Large</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>800px</td>
                      <td>1000px</td>
                      <td>1200px</td>
                    </tr>
                  </tbody>
                </table>
              </article>
            </section>
          </div>

          <div class="medium-container">
            <section id="grid">
              <article>
                <h2>Grid</h2>
                <p>
                  A simple flex grid with two breakpoints. <code>.half</code>,
                  <code>.one-fourth</code>, <code>.three-fourths</code>, <code>.one-third</code>,
                  and <code>.two-thirds</code> classes are available for sizes.
                </p>
                <pre><code class="language-html">&lt;div class=&quot;flex-row&quot;&gt;
	&lt;div class=&quot;flex-small&quot;&gt;&lt;/div&gt;
	&lt;div class=&quot;flex-small&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;flex-row&quot;&gt;
	&lt;div class=&quot;flex-large&quot;&gt;&lt;/div&gt;
	&lt;div class=&quot;flex-large&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
                <div class="flex-row">
                  <div class="flex-small example">1/2 small</div>
                  <div class="flex-small example">1/2 small</div>
                </div>
                <div class="flex-row">
                  <div class="flex-large example">1/2 large</div>
                  <div class="flex-large example">1/2 large</div>
                </div>
                <div class="flex-row">
                  <div class="flex-small example one-third">1/3</div>
                  <div class="flex-small example">2/3</div>
                </div>
                <div class="flex-row">
                  <div class="flex-small example one-fourth">1/4</div>
                  <div class="flex-small example">3/4</div>
                </div>
              </article>
            </section>

            <section id="typography">
              <article>
                <h2>Typography</h2>
                <p>
                  The font size is set to <code>1rem</code> on the <code>html</code> element, so all
                  font sizing will cascade from the root.
                </p>
                <p>
                  Headings all have the same line-height and margins, and only the font size is
                  individually defined.
                </p>
                <h1 style="margin: 1rem 0;">Heading 1</h1>
                <h2 style="margin: 1rem 0;">Heading 2</h2>
                <h3 style="color: #404040; margin: 1rem 0;">Heading 3</h3>
                <h4 style="margin: 1rem 0;">Heading 4</h4>
                <h5 style="margin: 1rem 0;">Heading 5</h5>
              </article>

              <article>
                <h3>Blockquote</h3>
                <p>
                  Blockquote is set to have a left border, with the browser default padding removed.
                  A <code>cite</code> will be right aligned and italicized.
                </p>

                <pre><code class="language-html">&lt;blockquote&gt;
	&lt;p&gt;Keep it secret. Keep it safe.&lt;/p&gt;
	&lt;cite&gt;Gandalf the Gray&lt;/cite&gt;
&lt;/blockquote&gt;</code></pre>
                <blockquote>
                  <p>Keep it secret. Keep it safe.</p>
                  <cite>Gandalf the Gray</cite>
                </blockquote>
              </article>
            </section>

            <section id="buttons">
              <article>
                <h2>Buttons</h2>
                <p>
                  Button elements, links with a <code>button</code> class, and input elements should
                  all render exactly the same.
                </p>
                <pre><code class="language-html">&lt;button&gt;Button&lt;/button&gt;
&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;Input&quot;&gt;
&lt;a class=&quot;button&quot;&gt;Link&lt;/a&gt;</code></pre>
                <button>Button</button>
                <input type="submit" value="Submit" />
                <input type="button" value="Input" />
                <a class="button">Link</a>
              </article>

              <article>
                <h3>Accent Buttons</h3>
                <p>Adding an <code>accent-button</code> class will display a secondary color.</p>
                <pre><code class="language-html">&lt;button class="accent-button"&gt;Button&lt;/button&gt;</code></pre>
                <button class="accent-button">Button</button>
                <input type="submit" value="Submit" class="accent-button" />
                <input type="button" value="Input" class="accent-button" />
                <a class="button accent-button">Link</a>
              </article>

              <article>
                <h3>Muted Buttons</h3>
                <p>Adding a <code>muted-button</code> class will create ghost/outline buttons.</p>
                <pre><code class="language-html">&lt;button class="muted-button"&gt;Button&lt;/button&gt;</code></pre>
                <button class="muted-button">Button</button>
                <input type="submit" value="Submit" class="muted-button" />
                <input type="button" value="Input" class="muted-button" />
                <a class="muted-button button">Link</a>
              </article>

              <article>
                <h3>Round Buttons</h3>
                <p>Adding a <code>round-button</code> class will create rounded buttons.</p>
                <pre><code class="language-html">&lt;button class="round-button"&gt;Button&lt;/button&gt;</code></pre>
                <button class="round-button">Button</button>
                <input type="submit" value="Submit" class="round-button" />
                <input type="button" value="Input" class="round-button" />
                <a class="round-button button">Link</a>
              </article>

              <article>
                <h3>Square Buttons</h3>
                <p>Adding a <code>square-button</code> class will create square buttons.</p>
                <pre><code class="language-html">&lt;button class="square-button"&gt;Button&lt;/button&gt;</code></pre>
                <button class="square-button">Button</button>
                <input type="submit" value="Submit" class="square-button" />
                <input type="button" value="Input" class="square-button" />
                <a class="square-button button">Link</a>
              </article>

              <article>
                <h3>Full Width Buttons</h3>
                <p>
                  Adding a <code>full-button</code> class will create full-width, block level
                  buttons. Button styles can be combined.
                </p>
                <pre><code class="language-html">&lt;button class="full-button"&gt;Button&lt;/button&gt;</code></pre>
                <button class="full-button">Button</button>
                <input
                  type="submit"
                  value="Submit"
                  class="full-button accent-button square-button"
                />
                <input type="button" value="Input" class="full-button round-button" />
                <a class="full-button muted-button button">Link</a>
              </article>
            </section>

            <section id="forms">
              <article>
                <h2>Forms</h2>
                <p>
                  Default forms will have full-width, block level labels, inputs, selects, and
                  textareas.
                </p>
                <pre><code class="language-html">&lt;form&gt;
  &lt;label for=&quot;name&quot;&gt;Name&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;name&quot; placeholder=&quot;First Name&quot;&gt;
  &lt;label for=&quot;choose&quot;&gt;Select&lt;/label&gt;
  &lt;select id=&quot;choose&quot;&gt;
    &lt;option disabled selected&gt;Please select&lt;/option&gt;
    &lt;option value="option-1"&gt;Option 1&lt;/option&gt;
    &lt;option value="option-2"&gt;Option 2&lt;/option&gt;
  &lt;/select&gt;
  &lt;label for=&quot;comments&quot;&gt;Additional Comments&lt;/label&gt;
  &lt;textarea id=&quot;comments&quot;&gt;&lt;/textarea&gt;
  &lt;label&gt;
    &lt;input type=&quot;checkbox&quot;&gt;
    Remember me
  &lt;/label&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
&lt;/form&gt;</code></pre>

                <form>
                  <label for="name">Name</label>
                  <input type="text" id="name" placeholder="First Name" />
                  <label for="email">Email</label>
                  <input type="email" id="email" placeholder="Email address" />
                  <label for="choose">Select</label>
                  <select id="choose">
                    <option disabled selected>Please select</option>
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                  </select>
                  <label for="comments">Additional Comments</label>
                  <textarea id="comments"></textarea>
                  <label> <input type="checkbox" /> Remember me </label>
                  <input type="button" value="Submit" />
                </form>
              </article>

              <article>
                <h3>Form Validation</h3>
                <p>
                  To express that action was successful, you can use <code>is-success</code> class.
                  If user's input has some errors, <code>has-error</code> class may be good for you.
                </p>
                <pre><code class="language-html">&lt;input type=&quot;text&quot; id=&quot;name&quot; placeholder=&quot;Name&quot; class=&quot;has-error&quot;&gt;</code><br><code class="language-html">&lt;input type=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;Email&quot; class=&quot;is-success&quot;&gt;</code></pre>
                <form>
                  <label for="name-error">Name</label>
                  <input type="text" id="name-error" placeholder="Name" class="has-error" />
                  <label for="name-success">Email</label>
                  <input type="email" id="name-success" placeholder="Email" class="is-success" />
                </form>
              </article>
            </section>

            <section id="tables">
              <article>
                <h2>Tables</h2>
                <p>Tables are set to a width of 100%, with a bottom border and bold headings.</p>
                <pre><code class="language-html">&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Head 1&lt;/th&gt;
      &lt;th&gt;Head 2&lt;/th&gt;
      &lt;th&gt;Head 3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;th&gt;Footer 1&lt;/th&gt;
      &lt;th&gt;Footer 2&lt;/th&gt;
      &lt;th&gt;Footer 3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Description 1&lt;/td&gt;
      &lt;td&gt;Description 2&lt;/td&gt;
      &lt;td&gt;Description 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Description 1&lt;/td&gt;
      &lt;td&gt;Description 2&lt;/td&gt;
      &lt;td&gt;Description 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Description 1&lt;/td&gt;
      &lt;td&gt;Description 2&lt;/td&gt;
      &lt;td&gt;Description 3&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                <table>
                  <thead>
                    <tr>
                      <th>Head 1</th>
                      <th>Head 2</th>
                      <th>Head 3</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>Footer 1</th>
                      <th>Footer 2</th>
                      <th>Footer 3</th>
                    </tr>
                  </tfoot>
                  <tbody>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                  </tbody>
                </table>
              </article>

              <article>
                <h3>Striped Tables</h3>
                <p>Add a <code>striped</code> class for alternating row background colors.</p>
                <pre><code class="language-html">&lt;table class=&quot;striped-table&quot;&gt;
  &lt;!-- etc --&gt;
&lt;/table&gt;</code></pre>
                <table class="striped-table">
                  <thead>
                    <tr>
                      <th>Head 1</th>
                      <th>Head 2</th>
                      <th>Head 3</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                    <tr>
                      <td>Description 1</td>
                      <td>Description 2</td>
                      <td>Description 3</td>
                    </tr>
                  </tbody>
                </table>
              </article>

              <article>
                <h3>Contained Tables</h3>
                <p>
                  Wrap the table in a <code>contain-table</code> class to prevent tables with a lot
                  of content from stretching on small screens.
                </p>
                <pre><code class="language-html">&lt;div class=&quot;contain-table&quot;&gt;
  &lt;table&gt;
  &lt;!-- etc --&gt;
  &lt;/table&gt;
&lt;/div&gt;</code></pre>
                <div class="contain-table">
                  <table>
                    <thead>
                      <tr>
                        <th>Head 1</th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <a href="https://taniarascia.github.io/primitive"
                            >https://taniarascia.github.io/primitive</a
                          >
                        </td>
                        <td>Description 2</td>
                        <td>Description 3</td>
                      </tr>
                      <tr>
                        <td>Description 1</td>
                        <td>Description 2</td>
                        <td>Description 3</td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr>
                        <td>Footer 1</td>
                        <td>Footer 2</td>
                        <td>Footer 3</td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </article>
            </section>

            <section id="lists">
              <article>
                <h2>Lists</h2>
                <p>Regular ordered and unordered lists have no special styling applied to them.</p>
                <pre><code class="language-html">&lt;ul&gt;
	&lt;li&gt;List item one
		&lt;ul&gt;
			&lt;li&gt;Nested list item&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;List item two&lt;/li&gt;
	&lt;li&gt;List item three&lt;/li&gt;
&lt;/ul&gt;</code></pre>
                <div class="row">
                  <div class="large-50">
                    <ul>
                      <li>
                        List item one
                        <ul>
                          <li>Nested list item</li>
                        </ul>
                      </li>
                      <li>List item two</li>
                      <li>List item three</li>
                    </ul>
                  </div>
                  <div class="large-50">
                    <ol>
                      <li>
                        List item one
                        <ol>
                          <li>Nested list item</li>
                        </ol>
                      </li>
                      <li>List item two</li>
                      <li>List item three</li>
                    </ol>
                  </div>
                </div>
              </article>

              <article>
                <h3>Definition Lists</h3>
                <p>
                  Definition titles are bold, and margins have been placed after each description.
                </p>
                <pre><code class="language-html">&lt;dl&gt;
	&lt;dt&gt;Definition Title One&lt;/dt&gt;
	&lt;dd&gt;First definition description&lt;/dd&gt;
	&lt;dt&gt;Definition Title Two&lt;/dt&gt;
	&lt;dd&gt;First definition description&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
                <dl>
                  <dt>Definition Title One</dt>
                  <dd>First definition description</dd>
                  <dt>Definition Title Two</dt>
                  <dd>First definition description</dd>
                </dl>
              </article>
            </section>

            <section id="code">
              <article>
                <h2>Code</h2>
                <p>
                  Style has been added for inline <code>&lt;code&gt;</code> tags, and
                  <code>&lt;kbd&gt;</code> is a <kbd>keyboard input</kbd>.
                </p>
                <p>Place blocks of preformatted code in a <code>&lt;pre&gt;&lt;code&gt;</code>.</p>
                <pre><code>class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}</code></pre>
              </article>
            </section>

            <section id="helpers">
              <article>
                <h2>Helpers</h2>
                <p>Helper classes are helpful for templating.</p>
              </article>

              <article>
                <h3>Vertical Center</h3>
                <p>
                  Vertically center an element with the <code>vertical-center</code> class. (Uses
                  <a href="http://caniuse.com/#search=flexbox" target="_blank">Flexbox</a>.)
                </p>
                <pre><code class="language-html">&lt;div class="vertical-center"&gt;
	&lt;div&gt;Vertically centered&lt;/div&gt;
&lt;/div&gt;</code></pre>
                <div class="vertical-center example" style="height: 100px;">
                  <div class="example">Vertically centered</div>
                </div>
              </article>

              <article>
                <h3>Text Alignment</h3>
                <p>
                  Use <code>text-left</code>, <code>text-right</code>, and
                  <code>text-center</code> to align content.
                </p>
                <pre><code class="language-html">&lt;p class=&quot;text-left&quot;&gt;Left&lt;/p&gt;
&lt;p class=&quot;text-center&quot;&gt;Center&lt;/p&gt;
&lt;p class=&quot;text-right&quot;&gt;Right&lt;/p&gt;</code></pre>
                <p class="text-left">
                  <span class="example" style="padding: 5px;">Left</span>
                </p>
                <p class="text-center">
                  <span class="example" style="padding: 5px;">Center</span>
                </p>
                <p class="text-right">
                  <span class="example" style="padding: 5px;">Right</span>
                </p>
              </article>

              <article>
                <h3>Screen Reader Text</h3>
                <p>
                  Accessibility is important - if you have a label that should be hidden but
                  accessible, or use an icon as a link, or want to skip navigation, use the
                  <code>screen-reader-text</code> class to hide content visually.
                </p>

                <pre><code class="language-html">&lt;a class=&quot;screen-reader-text&quot; href=&quot;#content&quot;&gt;Skip Navigation&lt;/a&gt;</code></pre>
              </article>

              <article>
                <h3>Responsive Images</h3>
                <p>Add a <code>responsive-image</code> class for responsive images.</p>
                <pre><code class="language-html">&lt;img src="#" class="responsive-image" alt="Responsive Image"&gt;</code></pre>
                <img
                  src="https://placehold.it/1000x100"
                  class="responsive-image"
                  alt="Example of responsive-image CSS class"
                />
              </article>

              <article>
                <h3>More Helper Classes</h3>
                <table>
                  <thead>
                    <tr>
                      <th>Class</th>
                      <th>What it does</th>
                    </tr>
                  </thead>
                  <tr>
                    <td>
                      <code>.space-between</code>
                    </td>
                    <td>
                      <code>justify-content: space-between</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.justify-center</code>
                    </td>
                    <td>
                      <code>justify-content: center</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.align-center</code>
                    </td>
                    <td>
                      <code>align-items: center</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.block</code>
                    </td>
                    <td>
                      <code>display: block</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.inline-block</code>
                    </td>
                    <td>
                      <code>display: inline-block</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.inline</code>
                    </td>
                    <td>
                      <code>display: inline</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.show</code>
                    </td>
                    <td>
                      <code>display: block !important</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.hide</code>
                    </td>
                    <td>
                      <code>display: none !important</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.padding-top</code>
                    </td>
                    <td>
                      <code>padding-top: 2rem</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.no-padding-top</code>
                    </td>
                    <td>
                      <code>padding-top: 0</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.padding-bottom</code>
                    </td>
                    <td>
                      <code>padding-bottom: 2rem</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.no-padding-bottom</code>
                    </td>
                    <td>
                      <code>padding-bottom: 0</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.margin-top</code>
                    </td>
                    <td>
                      <code>margin-top: 2rem</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.no-margin-top</code>
                    </td>
                    <td>
                      <code>margin-top: 0</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.margin-bottom</code>
                    </td>
                    <td>
                      <code>margin-bottom: 2rem</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.no-margin-bottom</code>
                    </td>
                    <td>
                      <code>margin-bottom: 0</code>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <code>.content-section</code>
                    </td>
                    <td><code>padding: 60px 0</code> (30px on mobile)</td>
                  </tr>
                </table>
              </article>
            </section>

            <section id="sass-main">
              <article>
                <h2>Sass</h2>
                <p>
                  This project is built with Sass (SCSS) and npm scripts. If you're not familiar
                  with these technologies, please read the tutorials below.
                </p>
                <ul>
                  <li>
                    <a href="https://www.taniarascia.com/learn-sass-now/" target="_blank"
                      >Learn to use Sass</a
                    >
                  </li>
                  <li>
                    <a
                      href="https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/"
                      targer="_blank"
                      >Learn to use Node.js/npm</a
                    >
                  </li>
                </ul>
                <p>
                  Sass is used to extend your CSS, allowing you to use useful concepts like
                  variables and nesting, as well as compartmentalizing and organizing the code. Npm
                  is used to watch for changes and process those Sass files into regular CSS files,
                  as well as minifying and adding prefixes for cross-browser compatibilty.
                </p>
                <p>If you already have Node installed, you can just clone the project...</p>
                <pre><code>git clone https://github.com/taniarascia/primitive.git</code></pre>
                <p>install the dev dependencies in the root of the project...</p>
                <pre><code>npm install</code></pre>
                <p>and run.</p>
                <pre><code>npm run sass:watch</code></pre>
              </article>

              <article>
                <h3>Directory Structure</h3>
                <p>
                  The project contains the source and destination folders, as well as a few
                  necessary project files.
                </p>
                <ul>
                  <li>
                    <strong>dist</strong> - the distribution folder that contains the final CSS,
                    JavaScript, and HTML output.
                  </li>
                  <li>
                    <strong>src</strong> - the source folder that contains all the
                    <code>scss</code> files and folders.
                  </li>
                  <li>
                    <strong>.gitignore</strong> - ignore <code>node_modules</code> and
                    <code>.sass-cache</code> files.
                  </li>

                  <li>
                    <strong>package.json</strong> - npm package folder to initialize
                    <code>node_modules</code>
                  </li>
                </ul>
                <pre>
dist/
├── css/
│   ├── main.css
│   └── main.css.map
├── js/
│   └── script.js
├── images/
│   └── favicon.png
├── index.html
src/
└── scss/
    ├── base/
    │   ├── _mixins.scss
    │   ├── _normalize.scss
    │   ├── _reset.scss
    │   └── _variables.scss
    └── components/
        ├── _scaffolding.scss
        ├── _grid.scss
        ├── _helpers.scss
        ├── _buttons.scss
        ├── _forms.scss
        ├── _tables.scss
        ├── _navigation.scss
        └── _layout.scss
        main.scss
.gitignore
LICENSE.md
README.md
package-lock.json
package.json</pre
                >
              </article>

              <article>
                <h3>Main Sass File</h3>
                <p>
                  In the main Sass file, <strong>main.scss</strong>, we'll pull in the configuration
                  (variables and mixins) first, followed by resets, then all the components.
                </p>
                <pre><code class="language-scss">// Configuration
@import "base/variables";
@import "base/mixins";

// Reset
@import "base/normalize";
@import "base/reset";

// Components
@import "components/scaffolding";
@import "components/grid";
@import "components/helpers"; 
@import "components/buttons";
@import "components/forms";
@import "components/tables";
@import "components/navigation";
@import "components/layout";</code></pre>
                <p>
                  Most of the components should be self-explanatory. <strong>Scaffolding</strong> is
                  the main styling of typography, links, headings, etc.
                  <strong>Navigation</strong> and <strong>layout</strong> are empty files, but I
                  kept them in because they're generally necessary. Add more files as necessary (3rd
                  party, fonts, etc).
                </p>
              </article>
            </section>

            <section id="sass-config">
              <article>
                <h2>Configuration</h2>
                <p>
                  Much of the design can be configured just by changing some settings in
                  <strong>_variables.scss</strong>. This file will define your colors, typography,
                  sizes, breakpoints, buttons, borders, and more. Define all your variables here to
                  keep your project organized.
                </p>
                <pre><code class="language-scss">/**
* Variables
*
* The majority of the configuration for the toolkit.
*/

//==============================================================================
// Containers
//==============================================================================

$x-small: 600px !default;
$small: 800px !default;
$medium: 1000px !default;
$large: 1200px !default;

//==============================================================================
// Breakpoints
//==============================================================================

$mobile: $x-small !default;
$tablet: $small !default;
$desktop: $medium !default;

//==============================================================================
// Global Colors
//==============================================================================

$background: white !default;
$primary-color: #0366ee !default;
$secondary-color: #29de7d !default;
$accent-color: #cdcdcd !default;
$alternate-background: #fafafa !default;
$alternate-color: #404040 !default;
$link-color: $primary-color !default;
$link-hover-color: darken($link-color, 15%) !default;
$highlight: #ffeea8 !default;
$error: #d33c40 !default;
$success: #29de7d !default;
$bq-border: 16px solid #f0f0f0 !default;

//==============================================================================
// Typography
//==============================================================================

// Body
$font-size: 1rem !default;
$body-font-size: 1rem !default;
$font-style: normal !default;
$font-variant: normal !default;
$font-weight: normal !default;
$font-color: #404040 !default;
$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$line-height: 1.6 !default;

// Headings
$heading-font-color: #404040 !default;
$heading-font-weight: 600 !default;
$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial,
 sans-serif !default;
$heading-line-height: 1.2 !default;

$h1-mobile: 1.75rem !default;
$h2-mobile: 1.5rem !default;
$h3-mobile: 1.25rem !default;
$h4-mobile: 1.1rem !default;
$h5-mobile: 1rem !default;

$h1: 2.25rem !default;
$h2: 2rem !default;
$h3: 1.75rem !default;
$h4: 1.5rem !default;
$h5: 1.25rem !default;

//==============================================================================
// Spacing
//==============================================================================

$padding: 1rem !default;
$margins: 1.5rem !default;
$content-padding: 60px 0 !default;
$content-padding-mobile: 30px 0 !default;

//==============================================================================
// Borders
//==============================================================================

$border-width: 1px !default;
$border-style: solid !default;
$border-color: #dedede !default;
$border-radius: 4px !default;
$borders: $border-width $border-style $border-color !default;

//==============================================================================
// Buttons
//==============================================================================

$button-background: $primary-color !default;
$button-background-hover: darken($button-background, 10%) !default;
$button-color: #ffffff !default;
$button-font-weight: 600 !default;
$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$button-font-size: 1rem !default;
$button-border-width: 1px !default;
$button-border-style: solid !default;
$button-border-color: $button-background !default;
$button-border-radius: $border-radius !default;
$button-text-transform: none !default;

// Accent buttons
$accent-button-background: $secondary-color !default;
$accent-button-color: #ffffff !default;
$accent-button-color-hover: #ffffff !default;

// Muted Buttons
$muted-border: 1px solid $accent-color !default;
$muted-border-hover: 1px solid darken($accent-color, 30%) !default;
$muted-background: transparent !default;
$muted-background-hover: transparent !default;
$muted-color: darken($accent-color, 50%) !default;
$muted-color-hover: darken($accent-color, 50%) !default;

// Round Buttons
$round-buttons: 40px !default;

//==============================================================================
// Forms
//==============================================================================

$forms: (
 '[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email],        [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea'
) !default;
$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]') !default;
$input-background: transparent !default;
$placeholder: darken($accent-color, 20%) !default;
$form-border: 1px solid $border-color !default;
$form-border-hover: 1px solid darken($border-color, 10%) !default;
$form-border-focus: 1px solid $link-color !default;

//==============================================================================
// Tables
//==============================================================================

$stripes: #f8f8f8 !default;
$caption: #ababab !default;

//==============================================================================
// Code
//==============================================================================

$code-color: $font-color !default;
$code-size: 14px !default;
$code-family: Menlo, monospace !default;
$code-background: transparent !default;
$code-borders: $borders !default;
</code></pre>
                <p>
                  Changing these default configurations will go a long way in setting the tone of
                  the rest of your site. View the example below to toggle the style of common HTML5
                  elements between Primitive, Bootstrap, Foundation, Material, and Skeleton
                  frameworks.
                </p>
                <p>
                  <a href="test.html" class="button">HTML5 Elements Test</a>
                </p>
                <p>From here, the design is up to you. Happy coding!</p>
              </article>
            </section>
          </div>

          <footer class="footer text-center">
            <div class="medium-container">
              <hr />
              <p class="padding-top">
                Built by
                <a href="https://www.taniarascia.com">Tania Rascia</a>.
                <a href="https://github.com/taniarascia/primitive" target="_blank">View on GitHub</a
                >.
              </p>
            </div>
          </footer>
        </main>
      </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/prism.js"></script>
    <script src="js/example.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>
